<template>
  <div class="righttop">
    <el-card>
      <div id="ViewCounts" style="width: 600px; height: 500px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getViewCount } from "@/api/article";

export default {
  name: "ViewCounts",
  data() {
    return {
      datatest: [
        // { value: 735, name: "Direct" },
        // { value: 580, name: "Email" },
        // { value: 484, name: "Union Ads" },
        // { value: 300, name: "Video Ads" },
        // { value: 108, name: "Search Engine" },
      ],
    };
  },
  watch: {
    datatest() {
      this.$nextTick(() => {
        this.mycharts();
      });
    },
  },
  mounted() {
    this.load();
  },
  beforeDestroy() {
    this.datatest = [];
  },
  methods: {
    load() {
      getViewCount()
        .then((res) => {
          console.log(res);
          res.data.forEach((element) => {
            this.datatest.push({
              value: element.viewCounts,
              name: element.categoryName,
            });
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    mycharts() {
      let myChart = echarts.init(document.getElementById("ViewCounts"));
      myChart.setOption({
        title: {
          text: "各类新闻资讯观看数",
          subtext: "CategoryViewCounts",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "10%",
          left: "left",
        },
        series: [
          {
            name: "观看数",
            type: "pie",
            top:"10%",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.datatest,
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
.righttop {
  width: 600px;
  height: 500px;
}
</style>